<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { getOrderStatusMessge } from '@/utils/util'
import { ElMessage, ElMessageBox } from "element-plus";
import { Warning } from '@element-plus/icons-vue'
import qStars from '@/components/qStars.vue'
const router = useRouter()
const route = useRoute()
const vdata = reactive({
    info: { name: '晨风日用小店', content: '', num: 5, starts: 3 },//店铺信息
    dialogFormVisible: false,
    dialogFrom: {

    }
})
onMounted(() => {
    // console.log(route.query)
    // vdata.goods = { ...route.query }
    /**
     * 在这里调获取消息的接口
     */
})

const submit = () => {
    ElMessage({
        message: '举报成功，感谢你的反馈',
        type: 'success',
    })
}
const closeShop = () => {
    ElMessageBox.confirm(
        '确认注销此店铺吗?',
        '确认信息',
        {
            confirmButtonText: '确认',
            cancelButtonText: '再想想',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '注销店铺成功',
            })
        })
        .catch(() => {
        })
}
const addProduct = () => {
    vdata.dialogFrom = {}
    vdata.dialogFormVisible = true
}
const editProduct = (item: any) => {
    vdata.dialogFrom = { ...JSON.parse(JSON.stringify(item)) }
    vdata.dialogFormVisible = true
}
</script>
<template>
    <div class="info_container">
        <el-row>
            <el-button type="success" :icon="Warning">保存更改</el-button>
        </el-row>
        <el-row class="info_form">
            <el-col :span="12">
                <div class="list_box">
                    <div class="header pad_l_20">晨风日用百货</div>
                    <div class="pro_data" v-for="(item, index) in 20" :key="index">
                        <el-icon>
                            <Search></Search>
                        </el-icon>
                        <span class="product_name"
                            @click="editProduct({ id: index + 1, name: '天堂伞（限定）' + (index + 1) })">天堂伞（限定）</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="11" style="margin-left: 20px;">
                <el-form label-width="auto">
                    <el-form-item label="店铺名称">
                        <el-input v-model="vdata.info.name" />
                    </el-form-item>
                    <el-form-item label="店铺描述">
                        <el-input v-model="vdata.info.content" :rows="5" type="textarea" />
                    </el-form-item>
                    <el-form-item label="评价人数">
                        <el-input v-model="vdata.info.num" disabled />
                    </el-form-item>

                    <el-form-item label="评分">
                        <qStars :numStar="vdata.info.starts"></qStars>
                    </el-form-item>
                    <el-row>
                        <el-form-item style="margin-left: auto;
    justify-content: flex-end;">
                            <el-button type="danger" @click="closeShop" style="width: 80px;">
                                <el-icon>
                                    <Close />
                                </el-icon>注销店铺
                            </el-button>
                        </el-form-item>
                    </el-row>
                    <el-form-item style="float: right;">
                        <el-button type="success" @click="addProduct" style="width: 80px;">
                            <el-icon>
                                <Plus />
                            </el-icon>添加商品
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
    <el-dialog v-model="vdata.dialogFormVisible" :title="vdata.dialogFrom.id ? '修改商品' : '添加商品'" width="720">
        <div class="form_box_main">
            <div class="form_box">
                <el-form :model="vdata.dialogFrom" label-width="100">
                    <el-row class="from_shop_name">
                        <el-col :span="14" class="name_left"></el-col>
                        <el-col :span="10" class="name_right">晨风日用百货</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12" style="padding-right: 10px;">
                            <div class="good_img">
                                <img :src="vdata.dialogFrom.goodsBanner" alt="" srcset="" />
                            </div>
                            <el-form-item label="商品名">
                                <el-input v-model="vdata.dialogFrom.name" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="库存数量">
                                <el-input v-model="vdata.dialogFrom.name" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="价格">
                                <el-input v-model="vdata.dialogFrom.name" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="描述">
                                <el-input v-model="vdata.dialogFrom.name" autocomplete="off" :rows="3"
                                    type="textarea" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" style="padding-left: 10px;position: relative;">
                            <el-form-item label="所属仓库">
                                <el-input v-model="vdata.dialogFrom.name" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="所属品牌">
                                <el-input v-model="vdata.dialogFrom.name" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="上次修改时间">
                                <el-input v-model="vdata.dialogFrom.name" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="商品状态">
                                <el-input v-model="vdata.dialogFrom.name" autocomplete="off" />
                            </el-form-item>
                            <el-button type="primary" @click="downProduct" style="width: 80px;margin-left: 20px;">
                                <el-icon>
                                    <CircleClose />
                                </el-icon>下架
                            </el-button>
                            <div class="save_btn">
                                <el-button type="success" @click="saveProduct" style="width: 80px;">
                                    <el-icon>
                                        <Warning />
                                    </el-icon>保存更改
                                </el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <!-- <template #footer>
            <div class="dialog-footer">
                <el-button @click="vdata.dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="vdata.dialogFormVisible = false">
                    Confirm
                </el-button>
            </div>
        </template> -->
    </el-dialog>
</template>
<style lang="scss" scoped>
.info_container {
    // display: flex;
    // width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    height: auto;
    padding-bottom: 20px;
    background-color: #fff;
    width: 900px;
    padding: 10px;

    .btn {
        width: 100%;
    }

    .info_form {
        margin-top: 10px;
    }

    .list_box {
        height: 600px;
        border: 1px solid #c4bfbf;
        overflow: auto;
        border-radius: 10px;

        .header {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #c4bfbf;
            font-size: 24px;
            ;
        }

        .pro_data {
            margin-left: 20px;
            margin-right: 20px;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #c4bfbf;
            display: flex;

            .el-icon {
                height: 50px;
                line-height: 50px;
            }

            .product_name {
                padding-left: 20px;
                color: #4e4a4a;
            }
        }

        .pad_l_20 {
            padding-left: 20px;
        }
    }
}

.from_shop_name {
    margin: 15px 0;
    width: 100%;
    align-items: flex-end;

    .name_left {
        height: 20px;
        background-color: #312e2e;
    }

    .name_right {
        height: 30px;
        line-height: 30px;
        background-color: #312e2e;
        padding-left: 20px;
        color: #fff;
    }
}

.good_img {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    margin-bottom: 20px;

    img {
        width: 180px;
        height: 180px;
    }
}

.form_box_main {
    width: 700px;
    margin: 0 auto;
    background-image: url(../assets/Imgs/bg_02.jpg);
    background-size: contain;

    .form_box {
        width: 650px;
        margin: 0 auto;
        padding-top: 20px;

        .el-form-item {
            margin-bottom: 35px;
        }
    }

    .save_btn {
        position: absolute;
        bottom: 30px;
        right: 30px;
    }
}
</style>